<template>
  <div class="stuff">
    <div class="clearfix">
      <div class="raw-item" v-for="(item, index) in value" :key="index">
        <el-input
          placeholder="请输入内容"
          style="width: 200px"
          v-model="item.name"
        ></el-input>
        <el-input
          placeholder="份量/g"
          style="width: 100px"
          v-model="item.specs"
        ></el-input>
        <i
          class="delete-icon el-icon-close"
          v-show="value.length !== 1"
          @click="remove(index)"
        />
      </div>
    </div>
    <el-button
      class="eaeaea"
      type="primary"
      size="medium"
      icon="el-icon-plus"
      @click="add"
    >
      增加一项
    </el-button>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Array,
      default: () => [],
    },
  },

  methods: {
    add() {
      this.$emit("input", [...this.value, { name: "", specs: "" }]);
    },
    remove(index) {
      this.$emit("input", [...this.value.filter((item, i) => i !== index)]);
    },
  },
};
</script>

<style>
.delete-icon {
  background-color: #ccc;
  border-radius: 50%;
  color: #fff;
}
.delete-icon:hover {
  background-color: #ff3232;
}
.raw-item {
  float: left;
  margin: 0 65px 20px 0;
}
.raw-item .el-input {
  margin-right: 5px;
}
</style>